<template>
    <span>标题</span>
    <input type="text" 
    placeholder="请输入代办标题"
    :value="modelValue"
    @input="updateValue"
    >
    <span>日期</span>
    <input type="date"
    :value="date" 
    @input="$emit('update:date', $event.target.value)"
    ><br>
    <button @click="addTable">提交</button><br>
    <button>添加</button>
    <table border="1" cellpadding="2" cellspacing="0">
        <tr>
            <th>标题</th>
            <th>日期</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in list" :key="item">
            <td>{{modelValue}}</td>
            <td>{{date}}</td>
            <td>
                <button @click="edit">编辑</button>
                <button @click="del">删除</button>
            </td>
        </tr>
    </table>
</template>

<script >
export default {
    name: 'Child',
    data() {
        return {
            list: []
            
        }
    },
    props: {
        modelValue: {
            type: String,
            default: ''
        },
        date: {
            type: String,
            default: ''
        }
    },
    methods: {
        updateValue(e) {
            this.$emit('update:modelValue', e.target.value)
        },
        //提交
        addTable(){
            // console.log(this.modelValue)
            if(this.modelValue == ''||this.date == ''){
                alert('请按照要求填写表单')
                return
            }
            this.list.push(this.modelValue)
            console.log(this.list)
            
        },
        // 编辑
        edit(){
            console.log('编辑')
        },
        // 删除
        del(){
            console.log('删除')
        }
    }
}
</script>